<template>
    <div class="container">
        <div class="district">
            <div class="title">
                区域:
            </div>
            <div 
                class="district_list"
            >
                <div 
                    class="district_list_item_container"
                    :class="{ 'show': !hide }"
                >
                    <span 
                        v-for="(item, index) in hotelScenicsList"
                        :key="index"
                        class="district_list_item"
                    >
                        {{ item.name }}
                    </span>
                </div>
                <div class="switch_btn">
                    <div 
                        @click="hide=!hide"
                        class="icon"
                        :class="{ 'transform': !hide }"
                    >
                        <i 
                            class="el-icon-arrow-down"
                        />
                        <i 
                            class="el-icon-arrow-down second_icon"
                        />
                    </div>
                    等{{ hotelScenicsList.length }}个区域
                </div>
            </div>
        </div>
        <div class="price">
            <div class="title">
                场均:
            </div>
            <div class="price_list">
                <div class="price_list_item">
                    <el-tooltip class="item"
                                effect="dark"
                                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                                placement="top-start">
                        <span>
                            <div class="huang_guan">
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                            </div>
                            ¥332
                        </span>
                    </el-tooltip>
                </div>
                <div class="price_list_item">
                    <el-tooltip class="item"
                                effect="dark"
                                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                                placement="top-start">
                        <span>
                            <div class="huang_guan">
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                            </div>
                            ¥521
                        </span>
                    </el-tooltip>
                </div>
                <div class="price_list_item">
                    <el-tooltip class="item"
                                effect="dark"
                                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                                placement="top-start">
                        <span>
                            <div class="huang_guan">
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                                <i 
                                    class="iconfont iconhuangguan"
                                />
                            </div>
                            ¥768
                        </span>
                    </el-tooltip>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        hotelScenicsList: {
            require: true,
            type: Array,
            default () {
                return [];
            }
        }
    },
    data () {
        return {
            hide: true
        };
    }
}
</script>

<style lang="less" scoped>
.container {
    height: 100%;
    width: 100%;
    .district {
        color: #666;
        font-size: 14px;
        margin-bottom: 40px;
        .title {
            float: left;
            margin-right: 20px;
        }
        .district_list {
            width: 90%;
            display: inline-block;
            position: relative;
            .district_list_item_container {
                max-height: 50px;
                overflow: hidden;
                &.show {
                    max-height: 1000px;
                }
            }
            .district_list_item {
                margin-right: 10px;
            }
            .switch_btn {
                position: absolute;
                left: 0;
                bottom: -20px;
                i {
                    color: #FF9900;
                    display: inline-block;
                }
                .icon {
                    float: left;
                    margin-right: 10px;
                    position: relative;
                    &.transform {
                        transform: rotate(180deg);
                    }
                    .second_icon {
                        position: absolute;
                        left: 0;
                    }
                }
            }
        }
    }
    .price {
        color: #666;
        font-size: 14px;
        .title {
            float: left;
            margin-right: 20px;
        }
        .price_list {
            .price_list_item {
                float: left;
                margin-right: 30px;
                .huang_guan {
                    float: left;
                    display: flex;
                    align-self: center;
                    margin-right: 5px;
                    i {
                        margin-right: 1px;
                        line-height: 22px;
                        color: #FF9900;
                    }
                }
            }
        }
    }
}
</style>